<template>
	<view class="container">
		<!-- 轮播图部分 -->
		<swiper class="banner" indicator-dots autoplay circular>
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<image :src="item.image" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		
		<!-- 预约和选购按钮 -->
		<view class="action-buttons">
			<view class="btn-item">
				<button class="custom-btn">预 约</button>
			</view>
			<view class="btn-item">
				<button class="custom-btn">选 购</button>
			</view>
		</view>
		
		<!-- 分类标签栏 -->
		<view class="category-tabs">
			<view class="tab-item" v-for="(item, index) in categories" :key="index">
				<image :src="item.icon" mode="aspectFit"></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		
		<!-- 福利展示区 -->
		<view class="welfare-section">
			<view class="welfare-item">福利1</view>
			<view class="welfare-item">福利2</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [
					{ image: '../../static/logo/logo1.jpg' },
					{ image: '../../static/logo/logo2.jpg' }
				],
				categories: [
					{ name: '银饰', icon: '/static/silver.png' },
					{ name: '皮具', icon: '/static/leather.png' },
					{ name: '玻璃', icon: '/static/glass.png' },
					{ name: '趣玩', icon: '/static/fun.png' },
					{ name: '活动', icon: '/static/activity.png' }
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.container {
	width: 100%;
}

.banner {
	width: 100%;
	height: 30vh;
}

.banner image {
	width: 100%;
	height: 100%;
}

.action-buttons {
	display: flex;
	justify-content: space-around;
	padding: 40rpx 30rpx;
	margin: 20rpx 0;
}

.category-tabs {
	display: flex;
	justify-content: space-between;
	padding: 20rpx;
}

.tab-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tab-item image {
	width: 80rpx;
	height: 80rpx;
}

.welfare-section {
	display: flex;
	justify-content: space-between;
	padding: 20rpx;
}

.welfare-item {
	width: 48%;
	height: 200rpx;
	background-color: #f5f5f5;
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn-item {
	width: 45%;
}

.custom-btn {
	width: 100%;
	height: 100rpx;
	border-radius: 8rpx;
	font-size: 36rpx;
	font-weight: bold;
	letter-spacing: 8rpx;
	background-color: #333;
	color: #fff;
	box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
	border: none;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

.custom-btn:active {
	transform: scale(0.98);
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
</style>
